<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-card :bordered="false" class="mb-2">
                <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                    class="ant-advanced-search-form">

                    <a-form :model="searchFormState">
                        <a-row :gutter="24">
                            <a-col :span="6">
                                <a-form-item label="预算单名称" name="name">
                                    <a-input v-model:value="searchFormState.name" placeholder="请输入成本控制单名称" />
                                </a-form-item>
                            </a-col><a-col :span="6">

                                <a-form-item label="项目编号" name="code">
                                    <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                                </a-form-item> </a-col><a-col :span="6">
                                <a-form-item label="项目名称" name="proName">
                                    <a-input v-model:value="searchFormState.proName" placeholder="请输入项目名称" />
                                </a-form-item> </a-col>
                            <!-- <a-col :span="6" v-show="advanced">
                            <a-form-item label="项目经理" name="projectManager">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.projectManager"
                                    :options="progressOptions"></a-select>
                            </a-form-item> </a-col> -->
                            <!--                             
                            <a-col :span="6" v-show="advanced">
                            <a-form-item label="负责人" name="director">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.director"
                                    :options="progressOptions"></a-select>
                            </a-form-item> </a-col> -->

                            <a-col :span="6" v-show="advanced">
                                <a-form-item label="所属部门" name="department">
                                    <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.department"
                                        :options="progressOptions"></a-select>
                                </a-form-item> </a-col><a-col :span="6" v-show="advanced">

                                <a-form-item label="预算总额">
                                    <a-row>
                                        <a-col :span="12">
                                            <a-input-number name="budgetAmountStart"
                                                v-model="searchFormState.budgetAmountStart" min="0" style="width: 100%;"
                                                placeholder="起始金额" />
                                        </a-col>
                                        <a-col :span="12">
                                            <a-input-number name="budgetAmountEnd"
                                                v-model="searchFormState.budgetAmountEnd" min="0" style="width: 100%;"
                                                placeholder="结束金额" />
                                        </a-col>
                                    </a-row>
                                </a-form-item> </a-col><a-col :span="6" v-show="advanced">
                                <a-form-item label="预算完成日期" name="completionDate">
                                    <a-row>
                                        <a-range-picker v-model:value="searchFormState.completionDate"
                                            style="width: 100%;" />
                                    </a-row>
                                </a-form-item>
                            </a-col>

                            <a-col :span="6" v-show="advanced">
                                <a-form-item label="审核状态" name="status" v-show="advanced">
                                    <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.status"
                                        :options="auditStatusOptions"></a-select>
                                </a-form-item> </a-col>
                            <a-col :span="6">
                                <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                                <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                                <a @click="toggleAdvanced" style="margin-left: 8px">
                                    {{ advanced ? '收起' : '展开' }}
                                    <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                                </a>
                            </a-col>
                        </a-row> </a-form>
                </a-form>
            </a-card>
            <a-card :bordered="false">
                <s-table ref="tableRef" :scroll="{ x: 1300, }"
                    :tool-config="{ refresh: true, height: true, columnSetting: true, striped: false }"
                    tableLayout="fixed" :data="loadData" bordered :columns="columns" class="mb-2">
                    <template #operator class="table-operator">
                        <div style="display: flex; justify-content: space-between">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.scope" style="width: 120px" :options="roles"
                                :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                            </a-select>
                            <!-- <a-space>
                            <a-button type="primary" @click="showEdit = true">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>

</a-space> -->
                        </div>
                    </template>
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'stateText'">
                            <stateTag :value="record.stateText" />
                        </template>
                        <template v-if="column.key === 'status'">
                            <div :style="{ 'background-color': getColorByValue(record.status) }"
                                class=" w-26 rounded text-center text-white">
                                {{ record.status }}
                            </div>
                        </template>
                        <template v-if="column.key === 'control'">
                            <div>
                                <a @click="costOnOpen(record)">查看</a>
                                <!-- <a @click="onOpen(record)">编辑</a> -->
                                <a-divider type="vertical" />
                                <a-popconfirm title="确定删除此数据源？" @confirm="remove(record)">
                                    <a-button type="link" danger size="small">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                    </template>
                </s-table>
            </a-card>
            <info ref="infoRef" :code="code" @OnClose="OnClose"></info>
        </div>
    </div>
</template>
<script setup>
import { message } from 'ant-design-vue'
import info from './components/index/info.vue'
import stateTag from '@/components/Task/stateTag.vue'
import { roles, auditStatusOptions, progressOptions } from '@/utils/constants.js'
import costApi from '@/api/pm/cost/index'
const showFliter = ref(false)
const editRef = ref()
const tableRef = ref()
const showEdit = ref(false)
const infoRef = ref()
const code = ref("");
const visible = ref(false);
const searchFormState = ref({
})
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const pmlist = [
    { value: 0, label: '张三' },
    { value: 1, label: '李四' },
]
const reset = () => {
    searchFormState.value = {}
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },

    {
        title: '预算单编号',
        dataIndex: 'code',
        key: 'code',
        width: 100,
        align: 'center'
    },
    {
        title: '预算单名称',
        dataIndex: 'name',
        key: 'name', width: 100,
        align: 'center'
    },

    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName', width: 100,
        align: 'center'

    },

    {
        title: '合作单位',
        dataIndex: 'cooperator',
        key: 'cooperator', width: 100,
        align: 'center'

    },
    {
        title: '成本总额',
        dataIndex: 'amount',
        key: 'amount', width: 100,
        align: 'center'
    },
    {
        title: '申请人',
        dataIndex: 'createUserName',
        key: 'createUserName',
        width: 100,
        align: 'center'
    },
    {
        title: '申请部门',
        dataIndex: 'orgName',
        key: 'orgName', width: 100,
        align: 'center'
    },
    {
        title: '审核状态',
        dataIndex: 'stateText',
        key: 'stateText', width: 100,
        align: 'center'
    },
    {
        title: '申请日期',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 160,
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: "center",
        fixed: "right"
    },

]
const onOpen = (record) => {
    editRef.value.show(record)
    showEdit.value = true

}
const submit = () => {
    editRef.value.submit()
}
const loadData = (parameter) => {
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return costApi.page(searchFormState.value).then((res) => {
        return res
    })
}
const remove = (record) => {

    costApi.delete([{
        id: record.id
    }]).then((res) => {

        message.success("删除成功")
        tableRef.value.refresh(true)

    })
}

const getColorByValue = (status) => {

    if (status === "新建未提审") {
        return "rgba(245, 154, 35, 1)"
    }
    if (status === "新建审核通过") {
        return "green"
    }
    if (status === "新建审核拒绝") {
        return "red"
    }
}

const costOnOpen = (record) => {
    infoRef.value.show(record)
}

const OnClose = (value) => {
    visible.value = false
}
const editOnClose = (flag) => {

    showEdit.value = false
    tableRef.value.refresh(true)
}

const add = () => {
    visible.value = true;
    infoRef.value.show()
}


</script>